<template>
  <div id="Collection">
    <div 
    class="info"
    v-if="collectionData.length"
      v-for="item in collectionData"
      :key="item._id"
    >
      <div class="title"><router-link :to="'/article/'+item.articleID._id+'?type='+item.articleID.md.split('/')[1]">{{item.articleID.title}}</router-link></div>
      <div class="des">{{item.articleID.des}}</div>
      <div class="more">
        <div class="defauits">
          <div class="small">
            <i class="iconfont icon-yuedu"></i>
            <span> {{item.articleID.vistor}} 阅读</span>
          </div>
          <div class="small">
            <i class="iconfont icon-pl"></i>
            <span> {{item.articleID.comment.length}} 评论</span>
          </div>
          <div class="small">
            <i class="iconfont icon-dianzan"></i>
            <span> {{item.articleID.likes.length}} 点赞</span>
          </div>
        </div>
        <div class="time">
          {{conversionDate(item.articleID.date)}}
        </div>
      </div>
    </div>
    <el-empty description="还没有任何收藏，赶快去收藏吧~" v-else></el-empty>
  </div>
</template>
 
<script>
export default {
  name: 'lately',
  data(){
    return{
      collectionData:[]
    }
  },
  methods:{
    // 获取用户收藏历史记录
    async getCollectionData(){
      let {data} = await this.$axios.get("/client/userOperation/getCollection") 
      if(data.code) return this.$message.warning(data.mes)
      this.collectionData = data.data
    },
    // 日期转化
    conversionDate(date){
      let time = new Date(date)
      let year = time.getFullYear()
      let month = time.getMonth()+1<10?"0"+( time.getMonth()+1): time.getMonth()+1
      let day = time.getDate()<10?"0"+time.getDate():time.getDate()
      let h = time.getHours()<10?"0"+time.getHours():time.getHours()
      let f = time.getMinutes()<10?"0"+time.getMinutes():time.getMinutes()
      let s = time.getSeconds()<10?"0"+time.getSeconds():time.getSeconds()
      return `${year}-${month}-${day} ${h}:${f}:${s}`
    },
  },
  created(){
    // 获取用户收藏
    this.getCollectionData()
  }
}
</script>

<style scoped lang='less'>
#Collection{
  background-color: #F2F3F3;
  .info{
    padding: 10px;
    height: 100px;
    margin-bottom: 10px;
    background-color: #fff;
    &:last-child{
      margin-bottom: 0;
    }
    &:first-child{
      margin-top: 10px;
    }
    .title{
      font-size: 18px;
      cursor: pointer;
      margin-bottom: 14px;
      a{
        text-decoration: none;
        color: #222226;
        &:hover{
          color: #FCBD01;
        }
      }
    }
    .des{
      font-size: 14px;
      color: #555666;
      line-height: 20px;
      white-space: normal;        //使文本可以多行显示
      text-overflow: ellipsis;    //使多余的部分用省略号来代替
      overflow: hidden;           //隐藏多余的部分
      display: -webkit-box;       //浮动布局
      -webkit-line-clamp: 2;      //显示的行数
      -webkit-box-orient: vertical;   //垂直排列
      height: 40px;
    }
    .more{
      margin-top: 15px;
      display: flex;
      justify-content: space-between;
      .defauits{
        width: 260px;
        display: flex;
        justify-content: space-around;
        color: #666;
        font-size: 14px;
        .small{
          i{
            color: 14px;
          }
        }
      }
      .time{
        color: #666;
        font-size: 14px;
      }
    }
  }
}
</style>